<template>
	<view class="myMachine">
		<view class="top_bg">
			<view class="slip-title">
				<view class="img">
					<image src="https://hxc-pay.oss-cn-shenzhen.aliyuncs.com/fBjLgFYEgh_goto_icon_white.png" mode="" @click="previous"></image>
				</view>
				<view class="txt">我的机具</view>
			</view>
			<view class="top_tab_box">
				<view class="ld-record-tabs">
					<view :class="changeTab=='TRANSFERRED'?'active':''" class="transfer" @click="changetabs('TRANSFERRED')">机具管理</view>
					<view :class="changeTab=='ACCEPTED'?'active':''" class="reception" @click="changetabs('ACCEPTED')">机具记录</view>
				</view>
				<view class="top_tab_box_txt">
					<text>终端SN共{{machinestotal||0}}台</text>  <text class="my-mglr-10">|</text>  <text>已激活{{activationTotal||0}}台</text>  <text class="my-mglr-10">|</text>  <text>未激活{{notActivationTotal||0}}台</text>
				</view>
			</view>
		</view>
		<view class="contant_box">
			<view class="content_box_tabs">
				<view class="content_box_tabs_li" :class="currSwitch===t.id?'active_bg':''" @click="switchTab(t.id)"
					v-for="(t,i) in switching" :key="i">
					<view :class="currSwitch===t.id?'bg':''" class="kong my-mgr-15"></view>
					<text>{{t.companyName}}</text>
				</view>
			</view>
			<view class="" v-show="changeTab=='TRANSFERRED'">
				<management :manageDev="manageDev"></management>
			</view>
			<view class="" v-show="changeTab=='ACCEPTED'">
				<machRecord :recordDev="recordDev"></machRecord>
			</view>
		</view>
	</view>
</template>

<script>
	import management from "@/components/management/management.vue"
	import machRecord from "@/components/machRecord/machRecord.vue"
	import { deviceListApi,mymachinedataApi} from "@/api/home.js"
	import {companyApi} from "@/api/results.js"
	export default {
		components:{
			management,
			machRecord
		},
		data() {
			return {
				changeTab: 'TRANSFERRED',
				activationTotal:0,//已激活总数
				notActivationTotal:0,//未激活总数
				machinestotal:0,//机具总数
				switching: [],
				currSwitch: 1,
				manageDev:[],//管理
				recordDev:{
					// distributeInNum:93,
					// distributeOutNum:4,
					// myExchangeNum:3,
					// myPayOfflineNum:5,
					// myPayOnlineNum:6,
					// nextLevelExchangeNum:21,
					// nextLevelPayNum:64,
					// teamExchangeNum:65,
					// teamPayNum:97,
				},//记录
			};
		},
		onLoad() {
			this.getCompany()
			this.getMachinesData()
		},
		methods: {
			async deviceListApi(){
				uni.showLoading({
					title:"正在加载中...."
				})
				var url 
				if(this.changeTab=='TRANSFERRED'){
					url= '/user/device/my/manage/'
				}else{
					url ='/user/device/my/record/'
				}
				const res = await deviceListApi(url,this.currSwitch)
				if(res.statusCode===200){
					uni.hideLoading()
					if(this.changeTab=='TRANSFERRED'){
						this.manageDev = res.data.data
					}else{
						this.recordDev = res.data.data
					}
				}
			},
			// 获取公司列表
			async getCompany(){
				uni.showLoading({
					title: "正在加载中...."
				})
				const res = await companyApi({})
				if(res.statusCode === 200){
					uni.hideLoading()
					this.switching = res.data.data
					this.currSwitch = res.data.data[0].id
					this.deviceListApi()
				}
			},
			// 二级tab切换
			switchTab(t) {
				this.currSwitch = t
				if(this.changeTab==='TRANSFERRED'){
					this.manageDev = []
				}else{
					this.recordDev = []
				}
				this.deviceListApi()
			},
			async getMachinesData(){
				uni.showLoading({
					title:"正在加载中....."
				})
				const res = await mymachinedataApi({})
				if(res.statusCode ===200){
					uni.hideLoading()
					this.activationTotal = res.data.data.activationTotal
					this.notActivationTotal = res.data.data.notActivationTotal
					this.machinestotal = res.data.data.total
				}
			},
			// 返回上一页
			previous() {
				uni.switchTab({
					url:"/pages/main/homePages"
				})
			},
			changetabs(item) {
				this.changeTab = item
				this.deviceListApi()
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.myMachine {
		width: 100%;
		height: 100vh;
		background: #FFFFFF;
		.top_bg{
			width: 750rpx;
			height: 333rpx;
			background: linear-gradient(180deg, #4B3D34 0%, #52483F 100%);
			.slip-title{
				width: 100%;
				height: 150rpx;
				display: flex;
				padding-top: 70rpx;
				.img{
					width:15%;
					height: 100%;
					padding-top: 13rpx;
					image{
						width: 38rpx;
						height: 38rpx;
						padding-left: 29rpx;
					}
				}
				.txt{
					width: 70%;
					height: 100%;
					text-align: center;
					font-size: 37rpx;
					font-weight: bold;
					color: #FFFFFF;
				}
			}
			.top_tab_box{
				width: 100%;
				height: 170rpx;
				.ld-record-tabs {
					width: 100%;
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					.transfer,
					.reception {
						width: 200rpx;
						height: 70rpx;
						text-align: center;
						line-height: 70rpx;
						font-size: 30rpx;
						font-weight: bold;
					}
				
					.reception,
					.transfer {
						background: #A7A29D;
						font-size: 30rpx;
						font-weight: 500;
						color: #FFFFFF;
					}
				
					.transfer {
						border-radius: 35rpx 0rpx 0rpx 35rpx;
					}
				
					.reception {
						border-radius: 0rpx 35rpx 35rpx 0rpx;
					}
				
					.active {
						background: #FFFFFF;
						font-weight: bold;
						color: #000000;
					}
				}
				.top_tab_box_txt{
					width: 100%;
					height: 65rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
		.contant_box{
			width: 100%;
			height: 990rpx;
			display: flex;
		}
		.content_box_tabs {
			width: 190rpx;
			height: 780rpx;
			background: #F7F7F7;
		
			.content_box_tabs_li {
				width: 100%;
				height: 130rpx;
				display: flex;
				align-items: center;
				text-align: center;
				font-size: 30rpx;
				font-weight: 500;
				color: #666666;
		
				.bg {
		
					background: #000000;
				}
		
				.kong {
					width: 12rpx;
					height: 42rpx;
				}
			}
		
			.active_bg {
				font-weight: 800;
				color: #333333;
				background: #FFFFFF;
			}
		}
	}
</style>
